<template>
    <dv-border-box7 :color="['#0D3568', '#49ACD6']" backgroundColor="" style="margin-top: 15px;">
        <div class="platewrapper">
            <headline title="实有房屋" />
            <div class="cont-wrapper">
                <div ref="chartRef" style="height: 240px;"></div>
                <div class="stat">
                    <a-space :size="8">
                        <div class="stat-item">
                            <div class="label">总建筑面积</div>
                            <div class="count">{{ totalAreaRef }}</div>
                        </div>
                        <div class="stat-item">
                            <div class="label">室内总面积</div>
                            <div class="count">{{ actualAreaRef }}</div>
                        </div>
                    </a-space>
                </div>
            </div>
        </div>
    </dv-border-box7>
</template>

<script setup lang="ts">
import * as echarts from 'echarts';

const chartRef = ref<Nullable<any>>();
const totalAreaRef = ref<number>(0.00); // 总建筑面积
const actualAreaRef = ref<number>(0.00); // 室内总面积

const renderChartEvent = () => {

    const chartData = [
        { name: '商铺', value: 250 },
        { name: '住宅', value: 100 },
        { name: '医院', value: 120 },
        { name: '仓库', value: 50 },
        { name: '未知', value: 300 },
    ];
    const colorList = ['#53FED0', '#73ACFF', '#FDD56A', '#FDB36A', '#FD866A', '#9E87FF', '#58D5FF', '#FFA800', '#EE6666', '#4658F6', '#6A8FC3'];
    
    const seriesData = chartData.map((item:Recordable, index:number) => {
        return {
            ...item,
            itemStyle: {
                color: colorList[index],
            },
            label: {
               color: colorList[index],
            },
        };
    });
    // 初始化图表
    const initEchart = echarts.init(unref(chartRef)); 
    // echart图表配置
    const option = {
        tooltip: {
            trigger: 'item',
            backgroundColor: 'rgba(0, 0, 0, .8)',
            textStyle: {
                color: '#fff',
            },
            formatter: "{b}: {c} ({d}%)",
        },
        title: {
            text: '房间总数',
            subtext: '5572',
            x: 'center',
            y: '38%',
            textStyle: {
                color: '#BAD5EA',
                fontSize: 14,
            },
            subtextStyle: {
                color: '#fff',
                fontSize: 30,
                fontWeight: 'normal',
            }
        },
        series: [{
            type: 'pie',
            radius: ['50%', '60%'],
            clockwise: true,
            avoidLabelOverlap: true,
            hoverOffset: 15,
            label: {
                show: true,
                position: 'outside',
                formatter: '{b} {c}个',
            },
            labelLine: {
                length: 20,
                length2: 30,
                lineStyle: { width: 1 }
            },
            data: seriesData
        }]
    };

    initEchart.setOption(option);

    window.addEventListener('resize', () => { //自适应大小
        initEchart.resize();
    });
};

onMounted(() => renderChartEvent());
</script>
<style lang="less" scoped>
.stat {
    margin-top: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    .stat-item {
        background-color: rgba(122,166,194,.1);
        width: 167px;
        height: 61px;
        border-radius: 3px;
        .label {
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: 700;
            color: #c1e7ff;
            text-align: center;
            padding-top: 8px;
        }
        .count {
            display: block;
            font-size: 24px;
            font-family: AZ;
            font-weight: 400;
            color: #53ffd0;
            text-align: center;
            line-height: 20px;
            padding-top: 6px;
        }
    }
}
</style>